<template>
  <div class="info">
    <img
      src="https://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/4.jpg"
      alt="PIC"
      mode="center widthFix"
      class="info__main-img"
    />

    <div class="info__title">柔派FlexPai 2 折叠另一种可能</div>
    <RoyoleIcon
      :info="{ name: '官方-柔宇动态', time: '1小时前', device: 'FlexPai 2' }"
      class="info__royole-icon"
    ></RoyoleIcon>
    <div class="info__content">
      <p class="info__content__paragraph">
        柔宇科技在2018年10月发布了全球首款折叠屏手机FlexPai，柔宇FlexPai
        2作为其二代产品，在屏幕、铰链等关键部件以及操作系统waterOS上做了大幅升级，产品耐用性、易用性都得到了大幅提升。同时9988元的价格，让FlexPai
        2成为唯一一款万元以内5G折叠屏手机。
      </p>

      <p class="info__content__paragraph">
        FlexPai
        2配有7.8英寸大屏，使用了柔宇自主研发生产的第三代蝉翼全柔性屏，独有的超低温非硅制程集成技术（ULT-NSSP）路线与智能力学仿真模型令屏幕稳定性得到大幅提升，屏幕能够承受180万次弯折而不损坏，如果一天折叠100次，可以折50年左右。
      </p>
      <p class="info__content__paragraph">
        FlexPai 2搭载了柔宇独创的Royole
        3S全闭合线性转轴，该转轴拥有211项专利，实现屏幕与铰链更好的融合，支持机身0-180°任意角度“无极”悬停，且支持无缝折叠，厚度相较于上一代产品减少近40%。
      </p>
      <RoyoleTag :info="{ views: 100, thumbs: 1000, comments: 1900 }" />
    </div>
    <div class="info__line"></div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import RoyoleIcon from "../../components/RoyoleIcon";
import RoyoleTag from "../../components/RoyoleTag";
export default {
  name: "ArticalSpecial",
  data() {
    return {
      isThumbs: false,
      thumbsNomalPng: require("../../assets//images/icons/icon_thumbs_up_normal.png"),
      thumbsClickPng: require("../../assets//images/icons/icon_thumbs_up_pressed.png"),
    };
  },
  computed: {
    ...mapState(["loginState", "userInfo"]),
  },
  components: {
    RoyoleIcon,
    RoyoleTag,
  },
};
</script>
<style lang="scss" scoped>
.info__main-img {
  width: 100%;
  margin-top: 32px;
  margin-bottom: 24px;
}
.info {
  .info__title {
    height: 35px;
    line-height: 35px;
    font-size: 24px;
    font-weight: 500;
  }
  .info__royole-icon {
    padding-top: 26px;
  }
  .info__sub-title {
    display: flex;
    align-items: center;
    padding-top: 26px;
    &__img {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(239, 244, 255, 1);
      border-radius: 50%;
      margin-right: 8px;
    }
    &__info {
      &__top {
        font-weight: 500;
        height: 20px;
        line-height: 20px;
      }
      &__bottom {
        padding-top: 2px;
        opacity: 0.4;
        font-family: Gotham-Book;
        font-size: 10px;
        line-height: 15px;
        font-weight: 300;
      }
    }
  }
  .info__content {
    &__paragraph {
      font-size: 16px;
      line-height: 28px;
      margin: 32px 0;
      word-break: break-all;
    }
  }
  .info__line {
    height: 1px;
    border: solid 1px rgba(255, 255, 255, 1);
  }
}
</style>
